<template>
  <div class="achievement g-wrap">
    <mt-header fixed title="培养计划">
      <router-link to="/manage" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <ul class="g-inputList searchlayer">
      <li>
        <div class="g-inputlist-title">学号</div>
        <div class="g-inputlist-content">
          <input v-model="ajax.xh" placeholder="学号" maxlength="20" />
        </div>
      </li>
      <li>
        <div class="g-inputlist-title">姓名</div>
        <div class="g-inputlist-content">
          <input v-model="ajax.xm" placeholder="姓名" maxlength="20" />
        </div>
      </li>
      <li>
        <div class="g-inputlist-title">学生类别</div>
        <div class="g-inputlist-content">
          <select v-model="ajax.xslbm">
            <option value="">选择学生类别</option>
            <option :value="item.code" v-for="item in requestCode[0].value">{{ item.name }}</option>
          </select>
        </div>
      </li>
      <li>
        <div class="g-inputlist-title">状态</div>
        <div class="g-inputlist-content">
          <select v-model="ajax.shzt">
            <option value="">选择状态</option>
            <option :value="item.code" v-for="item in requestCode[2].value">{{ item.name }}</option>
          </select>
        </div>
      </li>
      <li>
        <div class="g-inputlist-title">院系</div>
        <div class="g-inputlist-content">
          <select v-model="ajax.ssyxm" @change="getQueryAll2">
            <option value="">选择院系</option>
            <option :value="item.dwh" v-for="item in queryAll">{{ item.dwh }}-{{ item.dwmc }}</option>
          </select>
        </div>
      </li>
      <li>
        <div class="g-inputlist-title">专业</div>
        <div class="g-inputlist-content">
          <select v-model="ajax.sszym">
            <option value="">选择专业</option>
            <option :value="item.zyh" v-for="item in queryAll2">{{ item.zyh }}-{{ item.zymc }}</option>
          </select>
        </div>
      </li>
      <li>
        <div class="g-inputlist-title">年级</div>
        <div class="g-inputlist-content">
          <select v-model="ajax.sznj">
            <option value="">选择年级</option>
            <option :value="item.code" v-for="item in requestCode[1].value">{{ item.name }}</option>
          </select>
        </div>
      </li>
      <li>
        <div class="g-inputlist-title">学籍状态</div>
        <div class="g-inputlist-content">
          <select v-model="ajax.xjztm">
            <option value="">选择学籍状态</option>
            <option :value="item.code" v-for="item in requestCode[3].value">{{ item.name }}</option>
          </select>
        </div>
      </li>
    </ul>
    <div class="btnBox">
      <mt-button @click="search" size="small" type="primary" style="width:40%">查询</mt-button>
      <mt-button @click="search('reset')" type="danger" size="small">重置</mt-button>
    </div>

    <ul class="list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="20">
      <li v-for="(item, index) in infoData" @click="goDetail(item)">
        <span class="key">{{ index + 1 }}</span>
        <div class="con">{{ item.xh }} {{ item.xm }} {{ item.pyjhztmc }}</div>
        <span class="go link"></span>
      </li>
    </ul>

    <div v-if="isLoading && total === 0" class="noData">
      暂无数据
    </div>
    <mt-popup position="right" class="mint-popup" v-model="popupVisible">
      <div class="popupCon">
        <mt-cell title="学号">
          <span class="link" @click="go(detailData.pyjhId)">{{ detailData.xh || '--' }}</span>
        </mt-cell>
        <mt-cell title="姓名" :value="detailData.xm || '--'"></mt-cell>
        <mt-cell title="性别" :value="detailData.xbmc || '--'"></mt-cell>
        <mt-cell title="年级" :value="detailData.sznj || '--'"></mt-cell>
        <mt-cell title="院系" :value="detailData.dwmc || '--'"></mt-cell>
        <mt-cell title="专业" :value="detailData.zymc || '--'"></mt-cell>
        <mt-cell title="学生类别" :value="detailData.xslbmc || '--'"></mt-cell>
        <mt-cell title="导师" :value="detailData.dsxm || '--'"></mt-cell>
        <mt-cell title="审核状态" :value="detailData.pyjhztmc || '--'"></mt-cell>
      </div>
    </mt-popup>
    <div class="mint-popup-layerBtn" v-if="popupVisible">
      <mt-button @click="popupVisible = false" size="small" type="primary">关闭</mt-button>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import { managePyjh, TYPE0075, TYPE0126, TYPE0330, TYPE0073, queryAll, queryAllZy } from '@/api'
import { Indicator, Toast } from 'mint-ui'

export default {
  name: 'research',
  data() {
    return {
      isLoading: 0,
      infoData: '',
      loading: true,
      allLoaded: false,
      total: 0,
      currentPage: 1, //当前页面
      ajax: {
        pageSize: 30,
        pageNum: 1,
        ssyxm: '',
        sszym: '',
        xh: '',
        xm: '',
        xslbm: '',
        shzt: '',
        sznj: '',
        xjztm: ''
      },
      detailData: {},
      popupVisible: false,
      requestCode: [
        { name: TYPE0075, value: '' },
        { name: TYPE0126, value: '' },
        { name: TYPE0330, value: '' },
        { name: TYPE0073, value: '' }
      ],
      queryAll: [],
      queryAll2: []
    }
  },

  methods: {
    getStudentClientInfo(type) {
      this.loading = true
      this.ajax.pageNum = this.currentPage
      if (type === 'up') {
        this.ajax.pageNum++
      }

      if (type === 'up' && this.total <= this.currentPage * this.ajax.pageSize) {
        Toast({
          message: '已加装全部数据',
          duration: 1500
        })
        return
      }
      Indicator.open()
      const param = this.ajax
      request
        .post(managePyjh, param)
        .then((res) => {
          Indicator.close()
          const r = res.data
          this.isLoading = 1
          this.infoData = this.infoData || []
          this.total = (r.data && r.data.total) || 0
          if (r && r.data && r.data.rows && r.data.rows.length > 0) {
            this.infoData = this.infoData.concat(r.data.rows)

            this.currentPage = this.ajax.pageNum
            Toast({
              message: '第（' + this.currentPage + '）页',
              duration: 1500
            })
            this.loading = false
          }
          if ((r.data && r.data.rows && r.data.rows.length === 0) || !r.data) {
            Toast({
              message: '已加装全部数据',
              duration: 1500
            })
            this.loading = true
          }
        })
        .catch((err) => {})
    },
    goDetail(item) {
      this.detailData = item
      this.popupVisible = true
    },
    getTYPES() {
      this.requestCode.map((item, index) => {
        request
          .get(item.name, {})
          .then((res) => {
            const r = res.data
            if (r && r.data) {
              this.requestCode[index].value = r.data
            }
          })
          .catch((err) => {})
      })
    },
    getQueryAll() {
      request
        .post(queryAll, { lsdwh: '000' })
        .then((res) => {
          const r = res.data
          if (r && r.data) {
            this.queryAll = r.data
          }
        })
        .catch((err) => {})
    },
    getQueryAll2(val) {
      if (!val.target.value) return
      this.queryAll2 = []
      this.ajax.sszym = ''
      request
        .post(queryAllZy, { lsdwh: val.target.value })
        .then((res) => {
          const r = res.data
          if (r && r.data) {
            this.queryAll2 = r.data
          }
        })
        .catch((err) => {})
    },
    search(type) {
      this.pageNum = 1
      this.currentPage = 1
      this.infoData = ''
      if (type === 'reset') {
        this.ajax = {
          ...this.ajax,
          pageNum: 1,
          ssyxm: '',
          sszym: '',
          xh: '',
          xm: '',
          xslbm: '',
          shzt: '',
          sznj: '',
          xjztm: ''
        }
      }
      this.getStudentClientInfo(type)
    },
    loadMore() {
      this.getStudentClientInfo('up')
    },
    go(id) {
      console.log(id)
      if (!id) {
        Toast({
          message: '该学生暂未制定培养计划',
          duration: 2000
        })
        return
      }
      this.$router.push({ path: '/manage/training/detail', query: { id } })
    }
  },
  mounted() {
    this.getTYPES()
    this.getQueryAll()
    this.getStudentClientInfo()
  }
}
</script>

<style scoped lang="less">
@import url('../../../assets/styles/base.less');
.achievement {
  .list {
    height: 100%;
    padding: (20 / @base);
    li {
      padding: (15 / @base);
      padding-right: (35 / @base);
      position: relative;
      line-height: (40 / @base);
      min-height: (40 / @base);
      span.key {
        position: absolute;
        display: inline-block;
        width: (50 / @base);
      }
      span.go {
        position: absolute;
        display: block;
        width: (35 / @base);
        height: (50 / @base);
        top: (20 / @base);
        right: 0;
        background-image: url('../../../assets/goicon2.png');
        background-repeat: no-repeat;
        background-size: auto (30 / @base);
        background-position: 0 0;
      }
      .con {
        padding-left: (50 / @base);
      }
    }
    li:nth-child(2n + 1) {
      background: rgb(244, 244, 244);
    }
  }
  .topBtn {
    text-align: right;
    width: 100%;
    overflow: hidden;
    button {
      float: right;
      margin-right: (20 / @base);
      width: (300 / @base);
    }
  }
  .btnBox {
    text-align: center;
    button {
      width: 20%;
      margin: (10 / @base) auto;
    }
  }
  select {
    border: none;
    background: none;
    font-size: inherit;
    width: 100%;
  }
  .searchlayer {
    padding: (15 / @base) (15 / @base);
  }
}
</style>
